<!--
 * @Date: 2023-05-01 17:27:21
 * @LastEditTime: 2023-09-12 17:37:07
 * @FilePath: /wkw/src/views/invite/index.vue
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('fen-xiang-yao-qing')",
    "navbar": {
      "bg": "var(--C-white-O2)"
    }
  }
}
</route>
<script lang="ts" setup>
import { _require } from "@@/utils/tools";
import useUserinfoStore from "@@/store/useUserinfoStore";
import { omitText } from "@@/utils/tools/format";
import invitLogs from "./components/invitLogs.vue";
import { useCpageViewRef } from "@@/components/common/CpageView";
import { apiBindParent } from "@@/api/module/userInfo";
import { toast } from "@@/hooks/vantHooks";
import { isEthAddress } from "@@/utils/tools/project";

const userinofStore = useUserinfoStore();
const { address, userinfo } = storeToRefs(userinofStore);

const invit = computed(
  () => `${window.location.origin}/#/?invit=${address.value}`
);

const CpageViewRef = useCpageViewRef();
const invitLogsRef = ref<InstanceType<typeof invitLogs>>();
async function onRefresh() {
  CpageViewRef.value?.pullRefreshStart();
  const res = await invitLogsRef.value?.CrequestListRef?.rerequest();
  if (res?.type === "error") return CpageViewRef.value?.pullRefreshFail();
  CpageViewRef.value?.pullRefreshSuccess();
}
const btnLoading = reactive({
  bindInvit: false,
});

const formData = reactive({
  address: "",
});
const { t } = useI18n();

async function bindInvit() {
  if (!formData.address)
    return toast.text(t("qing-tian-xie-yao-qing-reng-di-zhi"));
  if (!isEthAddress(formData.address))
    return toast.text(t("qing-tian-xie-zhen-que-de-yao-qing-reng-di-zhi"));
  btnLoading.bindInvit = true;
  await apiBindParent(formData);
  btnLoading.bindInvit = false;
}
</script>
<template>
  <CpageView
    ref="CpageViewRef"
    pull-refresh
    @refresh="onRefresh"
    class="invit"
    :style="{
      '--invit-bg': `url(${_require('src/assets/images/bg/bg1.png')})`,
    }"
  >
    <div class="content C-white auto-MT-xs">
      <!-- <div class="decoration"></div>
      <h3>JOIN US</h3>-->

      <div class="tips">
        {{ $t("fu-zhi-yi-xia-lian-jie-yao-qing-hao-you-jia-ru") }}
      </div>
      <Ccard bg="var(--C-white-O3)" class="MT-lg auto-MT-md">
        <VanDivider style="margin: 0 150rem">WKC</VanDivider>
        <h3 class="T-A-C">{{ $t("yao-qing-lian-jie") }}</h3>
        <div class="T-S-sm flex-J-C">
          <VanTag color="var(--C-M1)" class="invitCode">
            <CcopyText :copy-text="invit">
              {{ omitText(invit, [15, "...", 15]) }}
            </CcopyText>
          </VanTag>
        </div>
        <h3 class="T-A-C">{{ $t("yao-qing-ma") }}</h3>
        <div class="T-S-sm flex-J-C">
          <VanTag color="var(--C-M1)" class="invitCode">
            <CcopyText :copy-text="address">
              {{ omitText(address, [8, "...", 8]) }}
            </CcopyText>
          </VanTag>
        </div>
      </Ccard>
      <Ccard
        v-if="!userinfo?.parent_id"
        bg="var(--C-white-O3)"
        class="MT-lg C-white"
      >
        <VanDivider style="margin: 0 150rem">
          {{ $t("tian-xie-yao-qing-ma") }}
        </VanDivider>
        <Rinput
          v-model="formData.address"
          :label-align="'top'"
          :label="$t('yao-qing-ren-di-zhi')"
          :border-mode="'bottom'"
          :placeholder="'0x0000...0000'"
        />
        <Rbutton
          @click="bindInvit"
          :loading="btnLoading.bindInvit"
          block
          class="MT-md"
          bg="var(--C-M1)"
        >
          {{ $t("bang-ding") }}
        </Rbutton>
      </Ccard>
      <Ccard v-else bg="var(--C-white-O3)" class="MT-lg C-white">
        <VanDivider style="margin: 0 150rem">
          {{ $t("wo-de-yao-qing-ren") }}
        </VanDivider>
        <div class="MT-md T-S-sm flex-J-C">
          <VanTag color="var(--C-M1)" class="invitCode">
            <div :copy-text="userinfo?.parent?.address">
              {{ omitText(userinfo?.parent?.address, [8, "...", 8]) }}
            </div>
          </VanTag>
        </div>
      </Ccard>
      <invitLogs ref="invitLogsRef" />
    </div>
  </CpageView>
</template>
<style lang="scss" scoped>
.invit {
  background-image: var(--invit-bg);
  background-size: cover;
  background-repeat: no-repeat;
  .content {
    text-align: right;
    .decoration {
      display: inline-block;
      height: 10rem;
      width: 50rem;
      background-color: var(--C-white);
    }
    .tips {
      margin-top: var(--gap-xxl);
      display: inline-block;
      background-color: var(--C-warn);
      border-radius: var(--R-sm);
      padding: var(--gap-xs) var(--gap-xl);
    }
    .invitCode {
      width: 100%;
      padding: var(--gap-sm) var(--gap-md);
      justify-content: center;
    }
  }
}
</style>
